<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 500px;
          height: auto;
            background-color:coral;
        }
        .inner{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: blueviolet;
             /*设置动画
              animation-name 设置关键幁的名字
               animation-duration 动画的执行时间
             */
             animation-name: test;
             animation-duration: 1.5s;
             /* animation-delay: ; */
             /* animation-timing-function: ease; */



            /*动画执行的次数
               可选值:0--n
                 infinite 无线次
            */
             animation-iteration-count:infinite ;


             /*执行的方位
               normal:默认值
               reverse: 反向的
               alternate:从左往右，循环
               alternate-reverse:从右往左反复循环
              
             */
             animation-direction:alternate;


             /*设置动画的播放状态
               running:动画执行
               pause 动画暂停
             */
              animation-play-state: running;

              /*动画的填充模式
                      none：元素运行完，回到原来的位置
                      forwards ：停在动画结束的位置
                      backwards：动画结束还是回到了开始的位置
                      both：结合了forwards 和backwards
              */
              /* animation-fill-mode: both; */
        }
        /* 
             过渡效果和动画效果相似:
                      但是过渡要在某一些属性发生变化的时候才有用，但是动画可以直接设置。
           设置动画效果， 首先要设置关键幁！
         
         */
         /*@keyframes 表示动画幁 后面的名字可以随便取*/
        @keyframes test {
          /*表示动画的开始位置,可以写0%  */
                 from{
                   
                margin-left: 0px;
                background-color: darkmagenta;
            }
             /*表示动画的结束位置，可以写100%  */
            to{margin-left: 60%;
               background-color: blueviolet;
            }
           
          
        }
    </style>
</head>
<body>
    <div class="outer">
      <div class="inner"></div>
    </div>
</body>
</html>